<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文档对象模型隐藏属性(Hidden properties of document object model)</title>
  <!-- 
  在JavaScript的文档对象模型（DOM）中，"隐藏属性"通常指的是一些不太常见或者不直接通过标准API访问的属性。这些属性可能在特定情况下对开发者有用，但一般情况下不被广泛使用。以下是关于DOM中一些隐藏属性的总结说明：

  一、隐藏属性的定义
  - 隐藏属性：这些属性并不是DOM标准的核心部分，可能在某些浏览器中存在但在其他浏览器中并不支持，或者它们可能是实现细节，不应直接依赖于它们。
  - 非标准：一些隐藏属性可能是特定浏览器实现的特性，可能会影响代码的可移植性和可靠性。

  二、常见的隐藏属性
  1.  `__proto__` ：
    - 每个JavaScript对象都有一个 `__proto__` 属性，指向该对象的原型。虽然这是一个标准的JavaScript属性，但它在DOM对象中经常被用作访问原型链的手段。
    const element = document.getElementById('myElement');
    console.log(element.__proto__); // 输出元素的原型对象
  2.  `ownerDocument` ：
    -  `ownerDocument` 属性返回当前节点所属的文档对象。虽然这个属性在某些情况下有用，但在日常开发中并不常见。
    const element = document.getElementById('myElement');
    console.log(element.ownerDocument); // 输出包含该元素的文档对象
  3.  `childNodes`  和  `firstChild` ：
    - 这些属性可以返回节点的所有子节点，包括文本节点。在处理DOM时，开发者可能更常使用 `children` （仅返回元素节点）而忽略了这些属性。
    const parentElement = document.getElementById('parent');
    const allChildNodes = parentElement.childNodes; // 包括所有子节点
    const firstChild = parentElement.firstChild; // 返回第一个子节点
  4.  `localName`  和  `namespaceURI` ：
    -  `localName` 属性返回节点的本地名称，而 `namespaceURI` 返回节点的命名空间URI。这在处理XML文档时可能会用到，但在HTML文档中则较少使用。
    const element = document.getElementById('myElement');
    console.log(element.localName); // 输出元素的本地名称（如：div）
    console.log(element.namespaceURI); // 输出元素的命名空间URI

  三、注意事项
  - 浏览器兼容性：由于隐藏属性可能不是所有浏览器都支持，因此在使用这些属性时要格外小心，确保代码的兼容性。
  - 可维护性：依赖于这些不常见的属性可能会导致代码可读性和可维护性降低，因此应尽量使用标准的DOM API。

  四、总结
  - DOM中的隐藏属性是一些不常用或非标准的属性，可能在特定情况下有用，但不应过于依赖。
  - 常见的隐藏属性包括 `__proto__` 、 `ownerDocument` 、 `childNodes` 、 `localName` 等。
  - 在使用这些属性时，开发者应考虑浏览器兼容性和代码的可维护性。
   -->
</head>
<body>

  <h3>切换案例hidden属性</h3>
  <div id="myElement">这是一个元素</div>
  <button onclick="toggleVisibility()">切换可见性</button>

  <script>
    function toggleVisibility() {
      const element = document.getElementById('myElement');
      element.hidden = !element.hidden;
    }
  </script>
  
</body>
</html>